<template>
    <div class="animate">
        <p class="p2">大千世界</p>
        <p class="p1">一眼看尽</p>
        <div class="title">
            <p class="p3">一</p>
            <p class="p4">眼</p>
            <p class="p4">世</p>
            <p class="p5">界</p>
        </div>
    </div>
</template>

<script>

    export default {
        mounted() {
            setTimeout(()=>{
                this.$router.push("/index")
            },5000);
        }

    }
</script>

<style lang="less" scoped>
.animate{
    width: 100%;
    height: 100vh;
    background-color: rgb(64,158,255);
    overflow: hidden;
    position: relative;
    .p2 {
        margin-top: calc((80vh)/2);
        height: 30px;
        font-size: 30px;
        color: white;
        font-weight: bold;
        width: 50%;
        animation: move 2s;
        opacity: 0;
    }
    @keyframes move
    {
        0%{

            transform: translate(0,0);
            opacity: 0;
        }
        50%{

            transform: translate(80%,0);
            opacity: 1;
        }
        100%{

            transform: translate(80%,0);
            opacity: 0;
        }
    }
    .p1{
        height: 30px;
        width: 50%;
        float: right;
        font-size: 30px;
        color: white;
        font-weight: bold;
        text-align: right;
        animation: mv 2s;
        opacity: 0;

    }
    @keyframes mv
    {
        0%{

            transform: translate(0,0);
            opacity: 0;
        }
        50%{
            transform: translate(-80%,0);
            opacity: 1;
        }
        100%{
            transform: translate(-80%,0);
            opacity: 0;
        }
    }
    .title{
        width: 20%;
        height: 50%;
        text-align: center;
        position: absolute;
        left: 40%;
        top: 30%;
        font-size: 35px;
        color: white;
        font-weight: bold;
    }
    .p3{
        animation: mv1 4s;
        opacity: 0;
    }
    .p4{
        animation: mv2 4s;
        opacity: 0;
    }
    .p5{
        animation: mv3 4s;
        opacity: 0;
    }
    .p6{
        animation: mv4 4s;
        opacity: 0;
    }
    @keyframes mv1
    {
        0%{
            opacity: 0;
        }
        50%{
            opacity: 0;
        }
        60%{
            opacity: 1;
        }
        100%{
            opacity: 1;
        }
    }
    @keyframes mv2
    {
        0%{
            opacity: 0;
        }
        50%{
            opacity: 0;
        }
        60%{
            opacity: 0.5;
        }
        70%{
            opacity: 1;
        }
        100%{
            opacity: 1;
        }
    }
    @keyframes mv3
    {
        0%{
            opacity: 0;
        }
        50%{
            opacity: 0;
        }
        70%{
            opacity: 0.5;
        }
        80%{
            opacity: 1;
        }
        100%{
            opacity: 1;
        }
    }
    @keyframes mv4
    {
        0%{
            opacity: 0;
        }

        50%{
            opacity: 0;
        }
        80%{
            opacity: 0.5;
        }
        90%{
            opacity: 1;
        }
        100%{
            opacity: 1;
        }
    }

}

</style>